<template>
	<view class="content">
		<view class="content-top">
			<c-navBar title="抗遗忘管理"></c-navBar>

			<heardSeach @emitParmas="seach" />
		</view>
		<view class="content-bottom" @load="Loads">
			<van-empty description="暂无数据" v-if="list.length===0" />
			<c-list  scroll-y="true" @scrolltolower="Loads"> 

				<view class="forgetting-item" v-for="(item,index) in list" :key="index">

					<view class="forgetting-tab">
						<view class="forgetting-tab-top">
							<view class="tab-item">
								<image class="tab-item-img" src="../../static/forgettingIcon1.png" mode="" />
								<text class="tab-item-text">{{item.user.username}} ({{item.user.phone}})</text>
							</view>
							<view class="tab-item">
								<image class="tab-item-img" src="../../static/forgettingIcon2.png" mode="" />
								<text class="tab-item-text tab-item-success">{{item.user.school.school_name}}</text>
							</view>
						</view>
						<view class="forgetting-tab-bottom forgetting-tab-top">
							<view class="tab-item">
								<image class="tab-item-img" src="../../static/forgettingIcon3.png" mode="" />
								<text class="tab-item-text">{{item.time}}</text>
							</view>

							<view class="tab-item">
								<image class="tab-item-img" src="../../static/forgettingIcon4.png" mode="" />
								<text class="tab-item-text tab-item-text1">{{ getreadType(item.study_type)}}</text>
							</view>
							<!-- <view class="tab-item" v-else>
								<image class="tab-item-img" src="../../static/forgettingIcon5.png" mode="" />
								<text class="tab-item-text">姜教练(老师)</text>
							</view> -->
						</view>
					</view>
					<view class="forgetting-name" :class="{'forgetting-name-2':item.type===2}">
						<text>{{item.type===1?'待复习':'已复习'}}</text>
					</view>
				</view>

			</c-list>
		</view>

		<!-- <van-empty description="暂无数据"  /> -->





	</view>
</template>
 
<script setup>
	
	import {
		getAntiForgettingList
	} from "@/apis/forgettingManagement.js"
	import heardSeach from "../../components/heardSeach/index.vue"

	import {
		getTimeDate
	} from "../../utils/index.js"
	import mescrollUni from "../../components/mescroll/mescroll-uni.vue"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	const pramas = reactive({
		start_date: '',
		end_date: '',
		search_data: '',
		page: 1,
		size: 20,
	})
	const listLoading = ref(false)
	const isNoUpdate = ref(false)
	const list = ref([]);
	const error = ref(false);
	const loading = ref(false);
	const total = ref(0)


	onLoad(() => {
		let time = getTimeDate()
		pramas.start_date = `${time.year}/${time.month}/${time.day}`
		pramas.end_date = `${time.year}/${time.month}/${time.day}`
		init()

	})

	const seach = (data) => {
		pramas.start_date = data.start_date
		pramas.end_date = data.end_date
		pramas.search_data = data.value
		pramas.page = 1
		list.value = []
		isNoUpdate.value = false
		init()

	}
	const getreadType = (e) => {
		switch (e) {
			case 1:
				return '单词';
				break;
			case 2:
				return '语法';
				break;
			case 3:
				return '方法';
				break;
			case 4:
				return '文章';
				break;
			case 5:
				return '音标';
				break;
			case 6:
				return '拼读';
				break;

		}
	}

	const init = async (type) => {
		try {
			if (listLoading.value || isNoUpdate.value) {
				return
			}
			listLoading.value = true;
			if (type) {
				pramas.page = pramas.page + 1
			}
			let {
				data
			} = await getAntiForgettingList(pramas)

			if (data && data.data.length > 0) {
				total.value = data.total

				list.value = [...list.value, ...data.data]
			} else {
				isNoUpdate.value = true
			}
			listLoading.value = false; 
			// console.log('触底加载') 
			console.log(list.value)
		} catch (err) {
			console.log(err)
			listLoading.value = false;
			isNoUpdate.value = false
		}



	}
	const Loads = () => {


		init(1)
		loading.value = false;
		error.value = false;


	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
		
	}

	.content-top {
		width: 100%;

	}

	.content-bottom {
		flex: 1; 
		width: 100%;
		overflow: hidden;
	}

	.heard {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: auto;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 20rpx;
		padding-top: 10rpx;
	}


	.seach-box {
		display: flex;
		width: 670rpx;
		margin-top: 18rpx;
	}

	.type-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 192rpx;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(252, 247, 247, 1);

		text {
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 30.46rpx;
			color: rgba(102, 102, 102, 1);
			margin-right: 28rpx;

		}

		.type-item-icon {
			font-size: 24rpx;
			color: rgba(102, 102, 102, 1);
		}


	}

	text {
		font-size: 32rpx !important;
	}

	.value-item {
		flex: 1;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(255, 255, 255, 1);
		margin-left: 9rpx;
		border: 2rpx solid rgba(252, 247, 247, 1);

		.uni-input {
			height: 66.59rpx;
			width: 345.21rpx;
			padding: 0 23rpx;
		}
	}

	.seach-btn {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		height: 66.59rpx;
		margin-left: 26rpx;

		text {
			font-size: 21.03rpx;
			line-height: 30.46rpx;
			color: rgba(51, 51, 51, 1);
		}

	}

	.c-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		width: 670rpx;
		flex: 1;
	}

	.forgetting-item {
		position: relative;
		display: flex;
		align-items: center;
		padding: 24rpx;
		width: 670rpx;
		margin: 0 auto;
		height: 112.15rpx;
		opacity: 1;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(204, 204, 204, 1);
		margin-bottom: 32rpx;
	}

	.forgetting-tab {
		display: flex;
		flex-direction: column;
		width: 547rpx;
	}

	.forgetting-tab-top {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 16rpx;

	}

	.forgetting-tab-bottom {
		margin-top: 19rpx;
	}

	.tab-item {
		display: flex;
		align-items: center;

		.tab-item-img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 11rpx;
			object-fit: contain;
		}
	}

	.tab-item-text {
		/** 文本1 */
		font-size: 22rpx;
		line-height: 32rpx;
		text-align: left;


	}

	.tab-item-text1 {
		color: rgba(153, 153, 153, 1);
		/** 文本1 */

	}

	.forgetting-name {
		width: 63.08px;
		height: 31.54px;
		opacity: 1;
		transform: rotate(30deg);
		font-size: 21.03rpx;
		font-weight: 700;
		line-height: 30.46rpx;
		color: rgba(153, 153, 153, 1);
		text-align: right;
		vertical-align: top;

	}

	.forgetting-name-2 {
		color: rgba(11, 186, 81, 1);
	}

	.forgetting-item {
		height: auto;
	}
</style>